<template>
  <div>
    <h2>count:{{ count }}</h2>
    <button @click="editCountHandler">修改count</button>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "App",
  data() {
    return {};
  },
  computed: {
    // 开启命名空间通过mapState方法获取数据
    // ...mapState({
    //   count: (state) => state.c1.count,
    // }),
    // ...mapState(模块名, [模块里state的属性]),
    ...mapState("c1", ["count"]),
  },
  methods: {
    ...mapActions("c1", ["increment"]),
    ...mapMutations("c1", ["INCREMENT"]),
    editCountHandler() {
      // 开启命名空间触发数据修改
      // this.$store.dispatch("c1/increment", 20);
      // this.increment(10);
      this.INCREMENT(20);
      // this.$store.state.c1.count = 50;
    },
  },
  mounted() {
    // 开启命名空间获取数据
    console.log(this.$store.state.c1.count);
  },
};
</script>

<style lang="less" scoped></style>
